<template>
    <div class="container-bg">
      <el-row>
        <el-col :span="24" :xs="24">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            label-width="70px"
          >
            <el-row>
              <el-col :span="8">
                <div class="grid-content ep-bg-purple" />
                <el-form-item label="方案名称" prop="strategyName">
                  <el-input
                    v-model="queryParams.strategyName"
                    @change="getList"
                    placeholder="请输入方案名称"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button @click="handleQuery" type="primary">
                    <span>查询</span>
                  </el-button>
                  <el-button @click="resetQuery" plain>
                    <span>重置</span>
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ep-bg-purple-light" />
              </el-col>
              <el-col :span="8" v-if="false">
              <!-- <el-col :span="8" style="display: flex;"> -->
                <el-form-item>
                  <el-button @click="handleAdd('add')" type="primary">
                    <span>添加</span>
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-alert title="数据可能存在延迟，请使用重置或查询按钮刷新" type="info"> </el-alert>
          <el-table v-loading="loading" :data="dataList">
            <el-table-column
              label="方案名称"
              align="center"
              key="strategyName"
              prop="strategyName"
            />
            <el-table-column
              v-if="false"
              label="设备"
              align="center"
              key="deviceInfo"
              prop="deviceInfo"
            >
              <template #default="scope">
                <span v-for="(item, index) in scope.row.deviceInfo">
                  <span v-if="index > 0 && index < scope.row.deviceInfo.length">
                    ,
                  </span>
                  <span>{{ item.deviceName }}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="播放间隔（s）"
              align="center"
              key="intervalTime"
              prop="intervalTime"
            />
            <el-table-column
              label="创建时间"
              align="center"
              key="createTime"
              prop="createTime"
            />
            <el-table-column
              v-if="false"
              label="操作"
              class-name="small-padding fixed-width"
              align="center"
              width="310"
            >
              <template #default="scope">
                <div style="width: 100%">
                  <el-button
                    v-if="false"
                    class="btn-blue"
                    size="small"
                    plain
                    @click="goDispatchRecord(scope.row, scope.$index)"
                    >下发记录
                  </el-button>
                  <el-button
                    class="btn-blue"
                    size="small"
                    plain
                    @click="handleAdd('edit', scope.row, scope.$index)"
                    >编辑
                  </el-button>
                  <el-button
                    class="btn-red"
                    size="small"
                    plain
                    type="danger"
                    @click="handleDelete(scope.row)"
                    >删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page="queryParams.pageNum"
            :limit="queryParams.pageSize"
            :pageSizes="[10,20,50]"
            @pagination="getList"
          />
          
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  // import {deleteTrafficRule} from "@/api/record";
  import { deleteMedia, queryMediaList } from "@/api/media-services";
  
  export default {
    data() {
      return {
        dataList: [],
        loading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          strategyName: "",
          beginTime: "",
          endTime: "",
        },
      };
    },
    methods: {
      handleDispatch(row, index) {
        this.$emit("handleDispatch", row, index);
      },
      handleAdd(type, row, index) {
        let arr = [];
        let title = "";
        switch (type) {
          case "add":
            title = "添加";
            break;
          default:
            title = "编辑";
            arr = row;
            break;
        }``
        this.$emit("handleAdd", {
          row: row,
          index: index,
          title: title,
          arr: arr,
        });
      },
      getList(val) {
        this.loading = true;
        console.log('val',val)
        if(val){
          this.queryParams.pageNum = val.page
          this.queryParams.pageSize = val.limit
          // this.queryParams. = this.$moment(val.time * 1000).format("YYYY-MM-DD HH:mm:ss");
        }
        queryMediaList(this.queryParams).then((res) => {
          console.log('res',res.data)
          this.loading = false;
          this.dataList = res.data;
          res.data.forEach(item => {
            let createTime = this.$moment(item.createTime * 1000).format("YYYY-MM-DD HH:mm:ss");
            item.createTime = createTime;
          });
          this.total = res.count || 0;
        });
      },
      handleQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          strategyName: this.queryParams.strategyName ? this.queryParams.strategyName : "",
          beginTime: "0",
          endTime: "0",
        };
        this.getList();
      },
      resetQuery() {
        // proxy.resetForm("queryRef");
        this.queryParams = {};
        this.handleQuery();
      },
      handleDelete(row) {
        console.log(206, row);
        this.$confirm(`确定要删除"${row.strategyName}"吗?`)
          .then(() => {
            deleteMedia({ mediaId: row.mediaId }).then((res) => {
              res ? this.msgSuccess("删除成功") : "";
              this.getList();
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
  </script>
  
  
  